<script setup>
import { ref, computed, defineAsyncComponent } from 'vue'

const activeTab = ref('activity')

const tabComponentMap = {
  clue: defineAsyncComponent(() => import('./clue.vue')),
  business: defineAsyncComponent(() => import('./business.vue')),
  activity: defineAsyncComponent(() => import('./activity.vue')),
  channel: defineAsyncComponent(() => import('./channel.vue'))
}

const CurrentTabComponent = computed(() => tabComponentMap[activeTab.value])
</script>

<template>
    <div>
        <el-tabs v-model="activeTab">
            <el-tab-pane label="线索分析" name="clue"></el-tab-pane>
            <el-tab-pane label="商机分析" name="business"></el-tab-pane>
            <el-tab-pane label="活动分析" name="activity"></el-tab-pane>
            <el-tab-pane label="渠道分析" name="channel"></el-tab-pane>
        </el-tabs>
        <component :is="CurrentTabComponent" :key="activeTab" />
    </div>
</template>

<style lang="scss" scoped>
.el-tabs {
    margin-left: 16px;
}
</style> 